<template>
	<view class="flex flex-ai-center flex-js-sb">
		<view></view>
		<view class="flex flex-center market-tab">
			<view :class="`mr-12 ${item.goodsType == form.goods_type ? 'active' :''}`" v-for="item in tabList"
				:key="item.goodsType" @click="$emit('changeTab',item)">{{item.name}}</view>
		</view>
		<slot name="right"></slot>
	</view>
</template>

<script>
	export default {
		props: {
			tabList: {
				type: Array,
				default: () => []
			},
			form: {
				type: Object,
				default: () => ({})
			}
		},
		watch: {
			lang(v) {
				this.tabList.forEach(i => i.name = this.handleLang(i.name))
			}
		},
		created() {
			this.tabList.forEach(i => i.name = this.handleLang(i.name))
		}
	}
</script>

<style scoped lang="scss">

	.market-tab {
		font-size: 32rpx;
		color: #CCCCCC;
		margin-left: 48rpx;

		view {
			padding-top: 10rpx;
		}

		.active {
			color: #fff;
			font-size: 36rpx;
			background: url($IMG_URL + '/static/icon/market-tab-bg.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: -10rpx;
		bottom: 15rpx;
	}
</style>